import React from 'react';
import {StyleSheet, ScrollView, View} from 'react-native';
import Toast from 'react-native-easy-toast';

import Top from './top';
import Form from './form';
import Header from '../../../components/header';

import utils from '../../../common/utils';
import api from '../../../common/api';
import auth from '../../../common/auth';

export default class App extends React.Component {
    state = {
        isFetching: false,          //正在注册
        time: 0,                    //验证码倒计时
        isCodeGetting: false        //正在发生验证码
    };
    sendSms = (phone) => {
        const {time, isCodeGetting} = this;
        if (time || isCodeGetting) {
            return;
        }
        if (!this.checkPhone(phone)) {
            return;
        }
        this.setState({
            isCodeGetting: true
        });
        api({url: 'api/member/getCodeByPhone', data: {phone}, notNeedLogin: true})
            .then(() => {
                this.timeDown();
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isCodeGetting: false
                });
            });
    };
    //检查手机号
    checkPhone = (phone) => {
        if (!phone) {
            this.showToast('请填写手机号');
            return false;
        }
        if (!utils.checkMobile(phone)) {
            this.showToast('手机号码格式不正确');
            return false;
        }
        return true;
    };
    //倒计时
    timeDown = () => {
        const timeout = 10;
        this.setState({
            time: timeout
        });
        this.timer = setInterval(
            () => {
                if (this.state.time <= 0) {
                    clearInterval(this.timer);
                    return;
                }
                this.tick();
            },
            1000
        );
    };
    //倒计时
    tick = () => {
        this.setState(prevState => ({
            time: prevState.time - 1
        }));
    };

    //提交注册
    submit = (phone, pwd, verifyCode, inviteCode) => {
        if (this.state.isFetching) {
            return;
        }
        if (!this.checkPhone(phone)) {
            return;
        }
        if (!pwd) {
            this.showToast('请填写密码');
            return;
        }
        if (!verifyCode) {
            this.showToast('请输入短信验证码');
            return;
        }
        this.setState({
            isFetching: true
        });
        api({
            url: 'api/member/registerByPhone',
            data: {phone, pwd, verify_code: verifyCode, invite_code: inviteCode},
            notNeedLogin: true
        })
            .then(data => {
                auth.setUserInfo(data)
                    .then(() => {
                        auth.setMobile(phone);
                        this.showToast('注册成功');
                        this.backTimer = setTimeout(() => {
                            clearTimeout(this.backTimer);
                            auth.goBack();
                        }, 1200);
                    });
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false
                });
            });
    };

    //toast弹出
    showToast = (text, time = 1000) => {
        this.refs.toast.show(text, time);
    };

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
        this.backTimer && clearTimeout(this.backTimer);
    }

    render() {
        const {isCodeGetting, time} = this.state;
        return (
            <View style={styles.container}>
                <Header/>
                <ScrollView style={{flex: 1}} keyboardShouldPersistTaps="handled">
                    <Top/>
                    <Form submit={this.submit} sendSms={this.sendSms} isCodeGetting={isCodeGetting} time={time}/>
                </ScrollView>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
        flex: 1
    }
});
